<template>
  <div>
    <!-- {{ barArr }} -->
    <Search :search="search" :reset="reset">
      <template v-slot:body>
        <el-form-item label="箱号" prop="code">
          <el-input v-model="query.code" name="code" clearable />
        </el-form-item>
        <el-form-item label="箱号" prop="code">
          <el-select v-model="query.box_type" placeholder="选择箱号类型">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <!--<el-form-item label="是否激活" prop="active">-->
        <!--  <el-radio-group v-model="query.active">-->
        <!--    <el-radio v-for="item in options" :key="item.value" :label="item.value" name="active">{{ item.label }}</el-radio>-->
        <!--  </el-radio-group>-->
        <!--</el-form-item>-->
      </template>
    </Search>
    <div class="table-default">
      <Operate :show="open">
        <template #operate>
          <el-button type="primary" @click="print()">打印</el-button>
        </template>
      </Operate>
      <el-table :data="tableData" class="mt-3" v-loading="loading" border @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="id" label="ID" width="80" />
        <el-table-column prop="code" label="箱号" width="170" />
        <el-table-column prop="box_type" label="箱号类型" width="130">
          <template #default="scope">
            <el-tag v-if="scope.row.box_type == '1'" class="ml-2" type="success">普通箱号</el-tag>
            <el-tag v-if="scope.row.box_type == '2'" class="ml-2" type="warning">周转箱号</el-tag>
          </template>
        </el-table-column>
        <!--        <el-table-column prop="days" label="添加日期" />
        <el-table-column prop="active" label="激活">
          <template #default="scope">
              <Status v-model="scope.row.active" :id="scope.row.id" :api="api" />
          </template>
        </el-table-column>-->
        <el-table-column prop="org_code" label="供应商" width="150" />
        <el-table-column prop="from" label="箱号来源" width="130">
          <template #default="scope">
            <el-tag v-if="scope.row.from == '1'" class="ml-2" type="success">{{ BoxFrom[0].label }}</el-tag>
            <el-tag v-if="scope.row.from == '2'" class="ml-2" type="warning">{{ BoxFrom[1].label }}</el-tag>
            <el-tag v-if="scope.row.from == '3'" class="ml-2" type="primary">{{ BoxFrom[2].label }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="docno" label="来源单号" width="220" />
        <el-table-column prop="material_no" label="品号" width="130" />
        <el-table-column prop="creator" label="创建人" width="120" />
        <el-table-column prop="created_at" label="添加时间" width="150" />
        <!--        <el-table-column prop="updated_at" label="修改时间" />-->
        <el-table-column label="操作" fixed="right" width="100">
          <template #default="scope">
            <Show @click="openHandler(scope.row.code)" />
          </template>
        </el-table-column>
      </el-table>
      <Paginate />
    </div>

    <Dialog v-model="visible" :title="title" destroy-on-close>
      <Create @close="close(reset)" :primary="id" :api="api" />
    </Dialog>

    <el-dialog v-model="printShow" title="打印预览" width="60%">
      <barCode :barArr="barArr" :PrintNow="PrintNow" @send-data="getDataHandler"></barCode>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="warning" @click="PrintNow = true">确认打印</el-button>
          <el-button @click="printShow = false">关闭</el-button>
        </span>
      </template>
    </el-dialog>
    <Dialog class="barcodeVue-Dialog" v-model="visibleShow" :title="'箱号详情'" destroy-on-close style="height: 80%; overflow: auto; width: 90%">
      <div class="opreate-box" >
        <el-table :data="opreationData" v-loading="opreateLoading" border style="width: 100%" >
          <el-table-column prop="lotnum" label="箱号" width="160" />
          <el-table-column prop="doc_type" label="单据类型" width="100" />
          <el-table-column prop="docno" label="单据编号" width="200" />
          <el-table-column prop="trans_type" label="操作类型" width="100" />
          <el-table-column prop="material_no" label="品号" width="150" />
          <el-table-column prop="qty" label="数量" width="">
            <template #default="scope"> {{ Number(scope.row.qty) }}</template>
          </el-table-column>
          <el-table-column prop="wms_code" label="仓库" width="100" />
          <el-table-column prop="location" label="库位" width="100" />
          <el-table-column prop="creator" label="操作人" width="100" />
          <el-table-column prop="add_time" label="操作时间" width="150" />
        </el-table>
        <div class="vard-view" v-loading="trackLoading">
          <h2>箱号追踪记录</h2>
          <div class="vard-view-box">
            <div class="card-item" v-for="(o, index) in codenumberList" :key="index">
            <el-descriptions class="margin-top" :title="o.doc_type" :column="1" border>
              <!-- <el-descriptions-item>
                <template #label>
                  <div class="cell-item">单据类型 ：</div>
                </template>
                {{ o.doc_type }}
              </el-descriptions-item> -->
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">箱号 ：</div>
                </template>
                {{ o.lotnum }}
              </el-descriptions-item>

              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">采购单号 ：</div>
                </template>
                {{ o.fbillno }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">品号 ：</div>
                </template>
                {{ o.material_no }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">供应商编码 ：</div>
                </template>
                {{ o.fsupplierid_number }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">供应商名称 ：</div>
                </template>
                {{ o.fsupplierid_name }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">仓库 ：</div>
                </template>
                {{ o.wms_code }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">库位 ：</div>
                </template>
                {{ o.location }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">单据编号 ：</div>
                </template>
                {{ o.docno }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">数量 ：</div>
                </template>
                {{ o.qty }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">操作人 ：</div>
                </template>
                {{ o.creator }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">操作时间：</div>
                </template>
                {{ o.add_time }}
              </el-descriptions-item>
            </el-descriptions>
          </div>
          </div>
          
        </div>
      </div>
    </Dialog>
  </div>
</template>

<script lang="ts" setup>
import { computed, onMounted, ref } from 'vue'
import Create from './create.vue'
import { useGetList } from '/admin/composables/curd/useGetList'
import { useDestroy } from '/admin/composables/curd/useDestroy'
import { useOpen } from '/admin/composables/curd/useOpen'
import { ElMessage } from 'element-plus'
import http from '/admin/support/http'
import barCode from './barCode.vue'
import { setTableHeight } from '/admin/utils/setHeight.js'

const api = 'base/box'

const { data, query, search, reset, loading } = useGetList(api)
const { destroy, deleted } = useDestroy()
const { open, close, title, visible, id } = useOpen()

const tableData = computed(() => data.value?.data)

const barArr = ref([])
const barcodeList = ref([])
const printShow = ref(false)
const PrintNow = ref(false)

let barCodeList = ref([])
let visibleShow = ref(false)
let openHandler = code => {
  visibleShow.value = true
  // showApi.value = api
  // showId.value = id
  getOperation(code)
  getTracking(code)
}


const options = ref([
  {
    value: '1',
    label: '普通箱号',
  },
  {
    value: '2',
    label: '周转箱号',
  },
  {
    value: '',
    label: '全部',
  },
])

const handleSelectionChange = (val: any) => {
  console.log(val)

  const arr = []

  for (const obj of val) {
    let oneObj = { code: '', img: '' }
    oneObj.code = obj.code
    oneObj.img = obj.img
    arr.push(oneObj)
  }
  console.log(arr)

  const uniqueSet = new Set(arr)
  barArr.value = [...uniqueSet]
  console.log('选中后的img', barArr.value)
}

let BoxFrom = ref([])

let getBoxFrom = () => {
  http.get('/options/BoxFrom').then(r => {
    let res = r.data.data
    console.log('箱号的枚举查询', res)
    BoxFrom.value = res
  })
}

getBoxFrom()

let opreationData = ref([])

let opreateLoading = ref(false)
let trackLoading = ref(false)

let getOperation = code => {
  opreateLoading.value = true
  http.get(`/base/box/log/${code}`).then(r => {
    let res = r.data.data
    console.log('请求当前箱号操作记录', res)
    opreationData.value = res
    opreateLoading.value = false
  })
}

let codenumberList = reactive({
  supplier: {},
  provisionalreceipt: {},
  inspectionlist: {},
  purchasewarehousing: {},
})

let getTracking = code => {
  codenumberList = {
    // supplier: {},
    // provisionalreceipt: {},
    // inspectionlist: {},
    // purchasewarehousing: {},
  }
  trackLoading.value = true
  const promises = [
    http.get(`/purchasing/codenumber/${code}?codenumber=supplier `),
    http.get(`/purchasing/codenumber/${code}?codenumber=provisionalreceipt `),
    http.get(`/purchasing/codenumber/${code}?codenumber=inspectionlist `),
    http.get(`/purchasing/codenumber/${code}?codenumber=purchasewarehousing `),
  ]

  Promise.all(promises.map(p => p.catch(error => ({ error }))))
    .then(results => {
      results.forEach((result, index) => {
        if (!result.error) {
          const resData = result.data.data
          console.log(resData)
            switch (index) {
              case 0:
                console.log('供应商送货', resData)
                if (typeof resData !== 'undefined' && typeof resData.lotnum !== 'undefined' && resData.lotnum !== '') codenumberList.supplier = resData
                // codenumberList.supplier = resData
                break
              case 1:
                console.log('暂收', resData)
                if (typeof resData !== 'undefined' && typeof resData.lotnum !== 'undefined' && resData.lotnum !== '') codenumberList.provisionalreceipt = resData
                // codenumberList.provisionalreceipt = resData
                break
              case 2:
                console.log('检验', resData)
                // codenumberList.inspectionlist = resData
                if (typeof resData !== 'undefined' && typeof resData.lotnum !== 'undefined' && resData.lotnum !== '') codenumberList.inspectionlist = resData
                break
              case 3:
                console.log('采购入库', resData)
                // codenumberList.purchasewarehousing = resData
                if (typeof resData !== 'undefined' && typeof resData.lotnum !== 'undefined' && resData.lotnum !== '')  codenumberList.purchasewarehousing = resData
                break
              default:
                break
          }
          console.log(codenumberList);

          
        } else {
          ElMessage.error('请求出错:', result.error)
          // console.error('请求出错:', result.error)
        }
      })
      trackLoading.value = false
    })
    .catch(error => {
      trackLoading.value = false
      ElMessage.warning('暂无数据或数据出错')
    })
}


const print = () => {
  console.log('打印', barArr.value)
  if (barArr.value.length != 0) {
    printShow.value = true
    // getPrint(barArr.value)
  } else {
    ElMessage.warning('请选择箱号！')
  }
}

const getDataHandler = () => {
  console.log('接收到子组件传值')
  printShow.value = false
  PrintNow.value = false
}
onMounted(() => {
  search()
  deleted(reset)
  setTableHeight('.table-default', '.el-table', true)
})
</script>

<style lang="css">
.opreate-box {
  width: 100%;
  height: 100%;
  padding: 10px;
}
.vard-view {
  padding: 1rem;
  margin-top: 1rem;
  width: 100%;
  border: 1px solid #ebeef5;
  box-shadow: 1px 1px 10px #ebeef5;
  border-radius: 5px;
}
.vard-view h2 {
  margin-bottom: 1rem;
  text-align: center;
  font-weight: bold;
  font-size: 16px;
}

.vard-view-box {
  width: 100%;
  display: flex;
  justify-content: space-around;
}
.card-item {

  flex: 25%;
  flex-grow: 0;
  margin-right: 1rem;
  border: 1px solid #e6e6e7;
  border-radius: 10px;
  padding: 0.5rem;
  box-sizing: border-box;
  box-shadow: 4px 4px 5px #ebedef;
}
.card-item .cell-item {
  word-spacing: nowarp;
  width: auto;
  font-size: 14px;
}

.card-item .el-descriptions__header {
  justify-content: center;
}
.card-item .el-descriptions__body .el-descriptions__table.is-bordered .el-descriptions__cell {
  width: 15%;
  padding: 3px 5px;
}
.card-item:hover {
  transform: scale(1.02);
  transition: all 0.5s;
  box-shadow: 4px 4px 5px #dbdde0;
}

.barcodeVue-Dialog .el-dialog__body {
  padding: 0.1rem;
}
</style>
